import { LeftOutlined, RedoOutlined, UndoOutlined } from '@ant-design/icons';
import { Image, Button } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';

// 创建样式化组件
const Container = styled.div`
  width: 100%;
  height: 50px;
  border-bottom: 1px solid var(--border-color);
  .h-left {
    width: 60px;
    height: 100%;
  }
  .h-center {
    flex: 1;
    height: 100%;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
  }
  .h-right {
    width: 80px;
    height: 100%;
  }
`;
interface HeaderProps {
  isEditor?: boolean;
}
const Header: React.FC<HeaderProps> = ({ isEditor }) => {
  const router = useNavigate();
  // const store = useEditorStore()
  const goHome = () => {
    localStorage.setItem('activeView', 'home');
    router('/');
  };
  const reset = () => {
    // store.resetComs()
  };
  return (
    <Container className="header flex justify-between items-center border-box p-l-5 p-r-5">
      <div className="h-left flex-center">
        <Button icon={<LeftOutlined />} onClick={goHome} />
      </div>
      <div className="h-center flex items-center justify-between pl-4 pr-4">
        {isEditor && (
          <>
            <Button icon={<UndoOutlined />} onClick={reset}>
              保存问卷
            </Button>
            <Button icon={<RedoOutlined />} onClick={reset}>
              重置问卷
            </Button>
          </>
        )}
      </div>
      <div className="h-right">
        <Image width={40} src={'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'} />
      </div>
    </Container>
  );
};

export default Header;
